<!-- CustomForm.vue -->
<template>
  <div class="base-form">
    <!-- 标题区域 -->
    <div v-if="title" class="form-header">
      <slot name="header">
        {{ title }}
      </slot>
    </div>

    <!-- 表单主体 -->
    <q-form class="form-body" v-bind="attrs" @submit="handleSubmit" @reset="handleReset">
      <!-- 表单内容插槽 -->
      <slot></slot>

      <!-- 表单底部按钮 -->
      <div v-if="showFooter" class="form-footer">
        <slot name="footer">
          <q-btn label="重置" type="reset" flat class="q-mr-sm" />
          <q-btn label="提交" type="submit" color="primary" />
        </slot>
      </div>
    </q-form>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'

// 1. Props 定义
defineProps({
  // 表单标题
  title: {
    type: String,
    default: '',
  },
  // 是否显示底部按钮
  showFooter: {
    type: Boolean,
    default: true,
  },
})

// 2. Emits 定义
const emit = defineEmits(['submit', 'reset'])

// 3. 获取透传属性
const attrs = useAttrs()

// 4. 方法定义
const handleSubmit = (event) => {
  emit('submit', event)
}

const handleReset = () => {
  emit('reset')
}

// 5. 对外暴露方法
defineExpose({
  reset: handleReset,
})
</script>

<style lang="scss" scoped>
.base-form {
  width: 100%;

  .form-header {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .form-footer {
    margin-top: 24px;
    text-align: right;
  }
}
</style>
